<template>
  <div>
    <el-checkbox-group v-model="resRoles" :disabled="canEdit===0" @change="handleChange">
      <el-checkbox v-for="role in roles" :key="role.id" :label="role.id" class="role-checkbox" :org-code="role.orgCode">
        <span :title="role.name">{{ role.name.length &lt;= 8 ? role.name : role.name.substr(0,7)+'...' }}</span>
      </el-checkbox>
    </el-checkbox-group>
    <div v-if="showHint" style="width:100%;line-height:150%;">
      1、“{{ platRoles }}”为平台全局角色，其它角色为产品级角色；<br>
      2、为平台级角色分配权限后，用户重新登录即可生效；为产品级角色分配权限后，仅新开通的系统生效；<br>
      3、“功能权限管理-->角色权限管理-->权限设置”提供为已开通系统角色分配权限的功能。
    </div>
  </div>
</template>

<script>
import { addClass, removeClass } from '@/global/utils/index'

export default {
    name: 'ResRoles',
    components: {

    },
    props: {
        resId: { type: String, default: function() { return '' } },
        resType: { type: String, default: function() { return 'VISIT' } },
        permissionCode: { type: String, default: function() { return '' } },
        rootOrgCode: { type: String, default: function() { return null } },
        sysCode: { type: String, default: function() { return null } },
        change: { type: Function, default: function() {} },
        canEdit: { type: Number, default: 1 }
    },
    data() {
        return {
            roles: [],
            resRoles: [],
            vo: {},
            showHint: false,
            platRoles: ''
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.getResRoles()
    },
    beforeDestroy() {

    },
    mounted() {
        if (this.$vnode.context.vo) {
            this.vo = this.$vnode.context.vo
            this.vo.passenger.resType = this.resType
            this.vo.passenger.pcode = this.permissionCode

            if ((this.vo.orgCode === 'plat' && this.vo.sysCode && this.vo.sysCode !== 'eccloud') || this.vo.sysCode && this.vo.sysCode === 'standard') {
                this.showHint = true
            }
        }
    },
    methods: {
        async getResRoles() {
            const resId = this.resId || ''
            const res = await this.$app.getResRoles(resId, this.resType, this.permissionCode, this.rootOrgCode, this.sysCode)
            if (res.code === 'success') {
                this.roles = res.body.roles
                this.platRoles = ''
                this.roles.forEach(role => {
                    if (role.sysCode === 'standard') {
                        if (this.platRoles !== '') this.platRoles += '、'
                        this.platRoles += role.name
                    }
                })
                res.body.resRoles.forEach(item => {
                    this.resRoles.push(item.id)
                })

                this.handleChange(this.resRoles)
            }
        },
        handleChange(newValue) {
            if (this.$vnode.context.vo) {
                this.$vnode.context.vo.passenger.resRoles = newValue.join(',')
            }
            this.change(newValue.join(','))
            if (newValue !== null) {
                removeClass(this.$el, '.invalid-field')
            } else {
                addClass(this.$el, '.invalid-field')
            }
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-checkbox {
        width: 130px;
        overflow: hidden;
}
</style>
